<template>
  <div class="product-list-wait">
    <div class="container">
      <createTop firstMenu="订单管理" secondMenu="生产单" title="生产单"></createTop>
      <el-card class="first">
        <div class="first-title">
          <div class="left big-wrod">等待配料</div>
          <div class="right">
            <div class="right-top">
              <div><span class="big">生产单号: </span>{{orderInfo.sc_order}}</div>
              <div><span class="big">销售员: </span>{{orderInfo.sell_username}}</div>
              <div><span class="big">交货日期: </span>{{orderInfo.date}}</div>
            </div>
            <div class="right-bottom">
              <div><span class="big">订单号: </span>{{orderInfo.order}}</div>
            </div>
          </div>
        </div>
        <el-table
        :border="true"
        :data="row"
        style="width: 100%"
        :fit="true"
        :stripe="true"
        size="mini"
        align="center">


          <el-table-column
            prop="goods_number"
            label="商品编号"
            min-width="100"
            align="center">
          </el-table-column>

          <el-table-column
            prop="goods_name"
            label="商品名称"
            min-width="130"
            align="center">
          </el-table-column>

          <el-table-column
            prop="class_name"
            label="类别"
            min-width="130"
            align="center">
          </el-table-column>

          <el-table-column
            prop="goods_model"
            label="型号"
            min-width="120"
            align="center">
          </el-table-column>

          <el-table-column
            prop="count"
            label="数量"
            min-width="120"
            align="center">
          </el-table-column>

        </el-table>
        </el-card>


      <!-- 第二个表格 -->
      <el-card class="top-card" shadow="always">
        <div slot="header" class="card-title">
        <el-button class="jianchapeiliao" plain type="success" size="small" @click="checkMtar(false)">检查配料</el-button>
          <span>配料清单</span>
          <el-button
          size="mini"
          plain
          type="primary"
          :style="{'marginLeft':'10px'}"
          @click="add">新增</el-button>
        </div>
           <div class="productListWait-table-wrap">
              <el-table
                :data="tableData"
                style="width: 100%"
                :fit="true"
                :stripe="true"
                size="mini"
                :border="true"
                align="center">

                <el-table-column label="操作"
                min-width="140"
                align="center">
                  <template slot-scope="scope">
                    <el-button
                      size="mini"
                      plain
                      type="danger"
                      @click="del(scope.$index,scope.row)">删除</el-button>
                  </template>
                </el-table-column>

                <el-table-column
                  prop="material_number"
                  label="配料编号"
                  min-width="100"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="material_name"
                  label="配料名称"
                  min-width="130"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="formats_name"
                  label="规格/型号"
                  min-width="130"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="material_unit"
                  label="单位"
                  min-width="120"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="need_count"
                  label="配料需量"
                  min-width="120"
                  align="center">
                </el-table-column>

                <el-table-column
                  prop="material_all_count"
                  label="库存数量"
                  min-width="120"
                  align="center">
                  <template slot-scope="scope">
                    <div :class="[scope.row.material_all_count<scope.row.outCount?'red':'']" v-text="scope.row.material_all_count"></div>
                  </template>
                </el-table-column>
                
                <el-table-column 
                label="出库数量"
                min-width="180"
                align="center">
                  <template slot-scope="scope">
                    <el-input 
                    v-model="scope.row.outCount" 
                    @blur="changeOutCount(scope)"
                    :class="{'red':scope.row.outCount > scope.row.material_all_count}"
                    placeholder="输入出库数量"></el-input>
                  </template>
                </el-table-column>

                <el-table-column 
                label="备注"
                min-width="180"
                align="center">
                  <template slot-scope="scope">
                    <el-input 
                    v-model="scope.row.tableRemark" 
                    placeholder="填写备注"></el-input>
                  </template>
                </el-table-column>
              </el-table>
              <deleteConfirm v-if="showMask" @closeDelete="closeDelete" @deleteConfirm="deleteConfirm"></deleteConfirm>
            </div>
      </el-card>

      <el-card shadow="always">
        <div slot="header" class="card-title">
          <span>出库信息</span>
        </div>
        <div class="content">
          <div class="se">

            <div class="content-title">制单人</div>
            <el-input :style="{'width':'350px'}" disabled v-model="doName" placeholder="读取账号"></el-input>
            </div>
              
            <div class="se">
            <div class="content-title">出库单号 </div>
            <el-input :style="{'width':'350px'}" disabled v-model="rukuid" placeholder="自动填充"></el-input>
          </div>
        </div>
        <div class="content">
              <div class="se">
              <div class="content-title">出库日期 <span class="red-icon">※</span></div>
              <el-date-picker
              :style="{'width':'350px'}"
              v-model="date"
              type="date"
              placeholder="选择日期时间"
              value-format="yyyy-MM-dd">
              </el-date-picker>

              <div class="content-title">出库类型 </div>
              <el-input :style="{'width':'350px'}" disabled v-model="leixing" placeholder="生产订单"></el-input>

          <div class="content-title">经办人 <span class="red-icon">※</span> </div>
            <el-input :style="{'width':'350px'}" v-model="doname" placeholder="输入经办人姓名"></el-input>
            </div>
          <div class="se">

          <div class="content-title">出库备注</div>
            <el-input :style="{'width':'350px'}" v-model="remark" type="textarea" :rows="5" resize="none" placeholder="输入适当的备注方便管理"></el-input>
          </div>
        </div>
      </el-card>
        <el-button
        class="confirms"
        size="small"
        type="primary"
        @click="confirm">配料完成</el-button>

      <childTable :id="id" v-show="showChild" @confirm="addTable" @close="closeChild"></childTable>

      <el-dialog
        v-if="showCheck"
        :title="checkTitle"
        :visible="true"
        width="30%"
        :show-close="false">
        <div class="message" v-html="checkMessage"></div>
        <span slot="footer" class="dialog-footer">
          <el-button type="primary" @click="showCheck = false">确 定</el-button>
        </span>
      </el-dialog>
      
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue';
import Component from 'vue-class-component';
import createTop from '@/components/createTop.vue';
import saveBtn from '@/components/saveBtn.vue';
import AjaxResquest from '@/api/apiRequest';
import childTable from '@/tables/order/productListWaitChild.vue';
@Component({
  components: {
    createTop,
    saveBtn,
    childTable
  }
})
export default class ProductListWait extends Vue {
  createRes!: AjaxResquest;
  infoRes!: AjaxResquest;

  row: any = [];

  tableData: any[] = [];

  outCount: string = '';
  tableRemark: string = '';
  showMask: boolean = false;
  leixing: string = '';
  doname: string = '';
  rukuid: string = '';
  remark: string = '';
  doName: string = '';
  date: any = '';
  showChild: boolean = false;
  $router!: any;
  id: any = '';
  checkMessage: any = '';
  checkRes!: AjaxResquest;
  showCheck: boolean = false;
  checkTitle: string = '';

  orderInfo: any = {};
  created() {
    this.id = this.$route.query.id;
    console.log(this.id);
  }
  mounted() {
    // this.row = temp;
    this.infoRes = new AjaxResquest('/order/productionsInfo');
    this.createRes = new AjaxResquest('/order/productionsToDo');
    this.checkRes = new AjaxResquest('/order/checkPeiliaoStock');

    this.getInfo();
  }
  getInfo() {
    this.infoRes.getFunction({ orderId: this.id }).then((res: any) => {
      let temp: any[] = [res.data.data.types.goods];
      this.row = temp;
      this.orderInfo = res.data.data.types.orderInfo;
      let qingdan: any[] = res.data.data.types.materials;
      qingdan.map((i: any) => {
        i.outCount = i.need_count;
      });
      this.tableData = [...this.tableData, ...qingdan];
      console.log(this.tableData);
    });
  }
  add(val: any) {
    console.log(val);
    this.showChild = true;
  }
  del(index: number, val: any) {
    // console.log(val);
    console.log(index);
    this.tableData.splice(index, 1);
  }
  closeChild() {
    this.showChild = false;
  }
  addTable(val: any) {
    let temp = val;
    let tempData: any[] = [];
    temp.map((i: any) => {
      i._models_id.map((j: any) => {
        let count!: number;
        let name!: string;
        let fId!: string;
        i.formats_info.forEach((e: any) => {
          if (e.format_id === j) {
            count = e.material_all_count;
            name = e.format_name;
            fId = e.format_id;
          }
        });
        let data = {
          materials_id: i.materials_id,
          material_name: i.material_name,
          material_number: i.material_number,
          material_unit: i.material_unit,
          need_count: i.need_count,
          formats_name: name,
          format_id: fId,
          material_all_count: count,
          tableRemark: '',
          outCount: ''
        };
        tempData.push(data);
      });
    });
    this.tableData = [...this.tableData, ...tempData];
    console.log(this.tableData);
    this.showChild = false;
  }
  changeOutCount(scope: any) {
    if (scope.row.outCount > scope.row.material_all_count) {
      console.log('数量超了');
    }
  }
  checkMtar(end: boolean) {
    // 检查配料
    let temp = this.tableData;
    console.log(temp);
    if (temp.length === 0) {
      this.$message({
        message: '还没有添加配料',
        type: 'warning'
      });
      return;
    }
    let checkData: any[] = [];
    let countNull = false;
    temp.forEach((i: any) => {
      if (!i.outCount) {
        this.$message({
          message: '清单数量不能为空',
          type: 'warning'
        });
        countNull = true;
      } else {
        console.log(i);

        let data = {
          format_id: i.format_id,
          format_name: i.formats_name,
          materials_id: i.materials_id,
          materials_name: i.material_name,
          outnumber: i.outCount
        };
        checkData.push(data);
      }
    });
    if (countNull) {
      return;
    }
    this.checkMessage = '';
    this.checkRes
      .getFunction({ data: JSON.stringify(checkData) })
      .then((res: any) => {
        this.showCheck = true;
        let temp: any = res.data.data.types;
        if (Object.prototype.toString.call(temp) === '[object String]') {
          if (end) {
            this.showCheck = false;
            this.confirmSecond();
          } else {
            this.checkMessage = temp;
          }
        } else if (Object.prototype.toString.call(temp) === '[object Array]') {
          if (end) {
            this.checkTitle = '配料不足,无法保存';
            temp.map((i: any) => {
              this.checkMessage += `配料：${
                i.format_name
              }  缺：<span class="red">${i.number}</span> . `;
            });
          } else {
            this.checkTitle = '配料库存检查';
            temp.map((i: any) => {
              this.checkMessage += `配料：${
                i.format_name
              }  缺：<span class="red">${i.number}</span> . `;
            });
          }
        }
      });
  }
  confirm(): void {
    this.checkMtar(true);
    return;
  }
  confirmSecond() {
    let temp = this.tableData;
    let s = false;
    console.log(temp);
    let sTemp: any[] = [];
    if (temp.length === 0) {
      this.$message.error('没有添加任何配料');
      return;
    }
    temp.map((i: any) => {
      // if (i.outCount > i.material_all_count) {
      //   this.$message.error('配料不足,请查验库存');
      //   s = true;
      // }
      let data = {
        format_id: i.format_id,
        materials_id: i.materials_id,
        number: i.outCount === '0' ? '0' : '-' + i.outCount,
        remarks: i.tableRemark ? i.tableRemark : ''
      };
      sTemp.push(data);
    });
    if (s) {
      // 判断库存够不够
      return;
    }
    let NTemp: string = JSON.stringify(sTemp);
    console.log(NTemp);
    // return;
    let data: any = {
      materialInfo: NTemp,
      orderId: this.id,
      doName: this.doname,
      date: this.date,
      type: 'out',
      remarks: this.remark,
      state: '生产订单'
    };
    this.createRes.getFunction(data).then((res: any) => {
      if (res.data.code === 1) {
        this.$to('productList');
      }
    });
  }
}
</script>
<style lang="less">
.product-list-wait {
  height: 100%;
  padding: 15px;
  display: flex;
  flex-direction: column;
  z-index: 101;
  box-sizing: border-box;
  overflow-y: auto;
  .top-card {
    position: relative;
    // padding: 10px;
    box-sizing: border-box;
    margin-bottom: 15px;
  }
  .el-card {
    overflow-y: auto;
  }
  .content {
    // display: flex;
    // flex-direction: column;
    font-size: 16px;
    background-color: #fff;
    border-radius: 4px;
    .content-title {
      height: 40px;
      margin-top: 20px;
      line-height: 2;
      text-align: left;
    }
    .short-input {
      width: 100%;
      width: 240px;
      margin-right: 10px;
    }
    .el-upload-list__item {
      width: 350px;
    }
    .el-textarea {
      margin-bottom: 30px;
    }
  }
  .card-title {
    text-align: left;
    font-weight: 600;
  }
  .first {
    position: relative;
    margin-bottom: 15px;
    text-align: left;
    // display: flex;
    // flex-direction: row;
    .first-title {
      display: flex;
      margin-bottom: 20px;
    }
    .left {
      margin-right: 40px;
      // float: left;
      // height: 100%;
    }
    .big-wrod {
      font-size: 24px;
      color: red;
    }
    .right {
      font-size: 14px;
      div {
        min-width: 140px;
        margin-right: 10px;
      }
      .big {
        font-weight: 600;
      }
    }
    .right-top {
      display: flex;
      margin-bottom: 10px;
    }
  }
  .red {
    color: red;
  }
  .confirms {
    margin-top: 15px;
  }
  .jianchapeiliao {
    position: absolute;
    right: 15px;
    top: 15px;
  }
}
</style>
